<template>
    <div style="background-color: #FFFFFF">
      <a-page-header style="border: 1px solid rgb(235, 237, 240)" :title="data.DetailData.objectMeta.name" @back="() => $router.go(-1)" v-if="data.DetailData.objectMeta">
<!--        <template>-->
          <div class="console-sub-title custom-sub-title top-sub clearfix">
            <div class="pull-left">
              <h4>基本信息</h4>
            </div>
          </div>
          <table class="table-default-viewer">
            <tbody>
            <tr>
              <td style="width: 50%">
                <span>名称</span>
                <span class="margin-right">: </span>
                <span>{{ data.DetailData.objectMeta.name }}</span>
              </td>
              <td>
                <span>命名空间</span>
                <span class="margin-right">: </span>
                <span>{{ data.DetailData.objectMeta.namespace }}</span>
              </td>
            </tr>
            <tr>
              <td style="width: 50%">
                <span>状态</span>
                <span class="margin-right">: </span>
                <span>
                  就绪：{{ data.DetailData.statusInfo.available }}/{{ data.DetailData.statusInfo.replicas }}个，
                  已更新：{{ data.DetailData.statusInfo.updated }}个，可用：{{ data.DetailData.statusInfo.available }}个，
                  不可用：{{ data.DetailData.statusInfo.unavailable }}个
                </span>
              </td>
              <td>
                <span>创建时间</span>
                <span class="margin-right">: </span>
                <span> {{ $filters.fmtTime(data.DetailData.objectMeta.creationTimestamp) }}</span>
              </td>
            </tr>
            <tr>
              <td style="width: 50%">
                <span>策略</span>
                <span class="margin-right">: </span>
                <span>{{ data.DetailData.strategy }}</span>
              </td>
              <td colspan="2">
                <span>选择器</span>
                <span class="margin-right">: </span>
                <span style="font-size: 12px; display: inline-block;  margin-bottom: 5px;" >
                <a-tag v-for="(label_k, label_v, index) in data.DetailData.selector" :key="index">{{ label_v }}: {{ label_k }}</a-tag>
              </span>
              </td>
            </tr>

            <tr>
              <td style="width: 50%">
                <span>滚动升级策略</span>
                <span class="margin-right">: </span>
                <div v-if="data.DetailData.rollingUpdateStrategy">
                  <span>超过期望的Pod数量: {{ data.DetailData.rollingUpdateStrategy.maxSurge }}</span>
                  <span style="padding-left: 30px">不可用Pod最大数量: {{ data.DetailData.rollingUpdateStrategy.maxUnavailable }}</span>
                </div>
              </td>
              <td>
                <span>注解</span>
                <span class="margin-right">: </span>
                <span style="font-size: 12px; display: inline-block; white-space: normal; margin-bottom: 5px;" >
                <span v-for="(k, v, i) in data.DetailData.objectMeta.annotations" :key="i">
                  <a-tag v-if="v !== 'kubectl.kubernetes.io/last-applied-configuration'" :key="i">
                    {{ v }}: {{ k }}
                  </a-tag>
                </span>
              </span>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span>标签</span>
                <span class="margin-right">: </span>
                <span style="font-size: 12px; display: inline-block; white-space: normal; margin-bottom: 5px;" >
                    <a-tag v-for="(label_k, label_v, index) in data.DetailData.objectMeta.labels" :key="index">{{ label_v }}: {{ label_k }}</a-tag>
                  </span>
              </td>
            </tr>
            </tbody>
          </table>
          <!-- 状态 -->
          <div class="console-sub-title custom-sub-title top-sub clearfix">
            <div class="pull-left">
              <h4>现状详情</h4>
            </div>
          </div>
          <div id="components-table-demo-size">

            <a-table
                :columns="deploymentStatusConditionsColumns"
                :data-source="data.DetailData.conditions"
                :pagination="false"
                :rowKey="item=>JSON.stringify(item)"
                :locale="{emptyText: '暂无数据'}"
            >
              <!-- 	更新时间 -->
              <template #lastProbeTime="{text}">
                {{ $filters.fmtTime(text.lastProbeTime) }}
              </template>
            </a-table>
          </div>

          <!-- 事件 -->
          <div class="console-sub-title custom-sub-title top-sub clearfix">
            <div class="pull-left">
              <h4>事件信息</h4>
            </div>
          </div>
            <a-table
                :columns="eventsColumns"
                :data-source="data.deploymentEventData"
                :pagination="false"
                :rowKey="item=>JSON.stringify(item)"
                :locale="{emptyText: '可能所有事件已过期'}"
                size="middle"
            >
                <!-- 	更新时间 -->
                <template #lastTimestamp="{text}">
                <span class="level-assess">
                  <span> {{ $filters.fmtTime(text.lastTimestamp) }}</span>
                </span>
                </template>

            </a-table>

          <br/>
          <a-tabs v-model:activeKey="data.workload" @change="callback">

            <a-tab-pane key="1" tab="容器组">
                <a-table
                    :columns="deploymentPodColumns"
                    :data-source="data.deploymentPodData"
                    :pagination="false"
                    :rowKey="item=>JSON.stringify(item)"
                    :locale="{emptyText: '暂无数据'}"
                >
                  <template #name="{text}">
                    <div>
                      <img style="width:14px;margin-right:2px" src="//g.alicdn.com/aliyun/cos/1.38.27/images/icon_docker.png">
                      <a @click="detailPod(text)">{{text.objectMeta.name}}</a>
                    </div>
                  </template>
                  <template #podStatus="{text}">
                    <span>
                      <a-tag color="#090" v-if="text.status==='Running'">Running</a-tag>
                      <a-tag color="default" v-else-if="text.status==='Completed'">Completed</a-tag>
                      <a-tag color="red" v-else>{{text.status}}</a-tag>
                    </span>
                  </template>

                  <template #nodeName="{text}">
                    <a @click="nodeDetail(text.nodeName)">{{text.nodeName}}</a>
                  </template>

                  <template #creationTimestamp="{text}">
                    <span>
                     {{ $filters.fmtTime(text.objectMeta.creationTimestamp) }}
                    </span>
                  </template>

                  <template #action="{text}">
                    <a-divider type="vertical"/>
                    <a @click="detailPod(text)">详情</a>
                    <a-divider type="vertical"/>
                    <a>终端</a>
                    <a-divider type="vertical"/>
                    <a @click="viewPodLog(text)">日志</a>
                    <a-divider type="vertical"/>
                    <a-dropdown :trigger="['click']">
                      <a class="ant-dropdown-link" @click.prevent>
                        更多
                        <DownOutlined/>
                      </a>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item><span @click="editDeployment(text)">编辑容器</span></a-menu-item>
                          <a-menu-item><span @click="removeOnePod(text)" style="color: red">删除容器</span></a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </template>
                </a-table>
            </a-tab-pane>

            <a-tab-pane key="2" tab="访问方式" force-render>
              <a-table
                  :columns="serviceColumns"
                  :data-source="data.serviceData"
                  :pagination="false"
                  :rowKey="item=>JSON.stringify(item)"
                  :locale="{emptyText: '暂无数据'}"
              >
                <template #name="{text}">
                  <a @click="serviceDetail(text)">{{ text.objectMeta.name }}</a>
                </template>

                <template #labels="{text}">
                  <span v-for="(v, k, i) in text.objectMeta.labels" :key="i">
                    <a-tag color="cyan">{{ k }}: {{ v }}</a-tag>
                  </span>
                </template>

                <template #internalEndpoint="{text}">
                  <span v-for="(v, k, i) in text.internalEndpoint.ports" :key="i">
                    {{ text.internalEndpoint.host }}: {{ v.port }} {{ v.protocol }}<br/>
                  </span>
                </template>

                <template #externalEndpoints="{text}">
                  <div v-if="text.externalEndpoints.length <= 0 ||text.externalEndpoints===null && text.externalEndpoints===undefined">
                    <span>-</span>
                  </div>
                  <div v-else>
                    <span v-for="(v, k, i) in text.externalEndpoints.ports" :key="i">
                      {{ text.externalEndpoints.host }}: {{ v.port }} {{ v.protocol }}<br/>
                    </span>
                  </div>

                </template>

                <template #creationTimestamp="{text}">
                  <span>
                   {{ $filters.fmtTime(text.objectMeta.creationTimestamp) }}
                  </span>
                </template>

                <template #action="{text}">

                  <a @click="serviceDetail(text)">详情</a>
                  <a-divider type="vertical"/>

                  <a-dropdown :trigger="['click']">
                    <a class="ant-dropdown-link" @click.prevent>
                      更多
                      <DownOutlined/>
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item><span @click="editService(text)">编辑服务</span></a-menu-item>
                        <a-menu-item><span @click="removeOneService(text)" style="color: red">删除服务</span></a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>

                </template>
              </a-table>
            </a-tab-pane>

            <a-tab-pane key="3" tab="历史版本" force-render>
              <a-table :columns="historyColumns" :data-source="data.historyData" size="middle" :rowKey="(record,index)=>{return index}" :pagination="false">
                <!-- 	更新时间 -->
                <template #create_time="{text}">
                  <span class="level-assess">
                     <span> {{ $filters.fmtTime(text.create_time) }}</span>
                  </span>
                </template>

                <template #action="{text}">
                  <a-popconfirm placement="left" ok-text="确定" cancel-text="取消" @confirm="rolloutDeployment(text)">
                    <template #title>
                      <span>你确定要回退应用版本吗？</span><br/>
                      <span>版本号： {{ text.version }} </span>
                    </template>
                    <a>回滚到该版本</a>
                  </a-popconfirm>

                </template>

              </a-table>
            </a-tab-pane>
          </a-tabs>
          <br/>
      </a-page-header>

      <template>
        <div>
          <a-modal v-model:visible="data.removeOnePodVisible" title="容器 (Container) "
                   @ok="removeOnPodOnSubmit" cancelText="取消"
                   okText="确定" :keyboard="false" :maskClosable="false">
            <a-space>
              <p class="circular">
                <span class="exclamation-point">i</span>
              </p>
              <p>确认删除 {{ data.removeOnePodData.objectMeta.name }} 容器？</p>
            </a-space>
          </a-modal>
        </div>
      </template>

      <template>
        <div>
          <a-modal v-model:visible="data.removeOneServiceVisible" title="服务 (Service) "
                   @ok="removeOnServiceOnSubmit" cancelText="取消"
                   okText="确定" :keyboard="false" :maskClosable="false">
            <a-space>
              <p class="circular">
                <span class="exclamation-point">i</span>
              </p>
              <p>确认删除 {{ data.removeOneServiceData.objectMeta.name }} 服务？</p>
            </a-space>

            <br/>

          </a-modal>
        </div>
      </template>
    </div>
</template>

<script>
import {inject, onMounted, reactive} from "vue";
import {useRoute} from "vue-router";
import {DeleteCollectionPods, DeletePod, DeleteService, DeploymentDetail, DeploymentRollBack} from "../../api/k8s";
import {GetStorage} from "../../plugin/state/stroge";
import routers from "../../router";
import router from "../../router";

const deploymentStatusConditionsColumns = [
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '更新时间',
    slots: {customRender: 'lastProbeTime'},
  },
  {
    title: '原因',
    dataIndex: 'reason',
  },
  {
    title: '消息',
    dataIndex: 'message',
  },
]
const historyColumns = [
  {
    title: '版本',
    dataIndex: 'version',
  },
  {
    title: '镜像',
    dataIndex: 'image',
  },
  {
    title: '创建时间',
    slots: {customRender: 'create_time'},
  },
  {
    title: '操作',
    slots: {customRender: 'action'},
  },
]
const eventsColumns = [
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '对象',
    dataIndex: 'involvedObject.kind',
  },
  {
    title: '信息',
    dataIndex: 'message',
  },
  {
    title: '原因',
    dataIndex: 'reason',
  },
  {
    title: '时间',
    slots: {customRender: 'lastTimestamp'},
  },
]
const deploymentPodColumns = [
  {
    title: '名称',
    slots: {customRender: 'name'},
  },
  {
    title: '状态',
    slots: {customRender: 'podStatus'},
  },
  {
    title: '重启次数',
    dataIndex: 'restartCount',
  },
  {
    title: 'Pod IP',
    dataIndex: 'podIP',
  },
  {
    title: '调度节点',
    slots: {customRender: 'nodeName'},
  },
  {
    title: '创建时间',
    slots: {customRender: 'creationTimestamp'},
  },
  {
    title: '操作',
    slots: {customRender: 'action'},
  },
]
const serviceColumns = [
  {
    title: '名称',
    slots: {customRender: 'name'},
  },
  {
    title: '标签',
    slots: {customRender: 'labels'},
  },
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '集群IP',
    dataIndex: 'clusterIP',
  },
  {
    title: '内部端点',
    slots: {customRender: 'internalEndpoint'},
  },
  {
    title: '外部端点',
    slots: {customRender: 'externalEndpoints'},
  },
  {
    title: '创建时间',
    slots: {customRender: 'creationTimestamp'},
  },
  {
    title: '操作',
    slots: {customRender: 'action'},
  },
]
export default {
  name: "DeploymentDetail",
  setup(){
    const message = inject('$message');
    const data = reactive({
      DetailData: [],
      deploymentEventData: [],
      historyData: [],
      deploymentPodData: [],
      removeOnePodData: [],
      removeOnePodVisible: false,
      serviceData: [],
      removeOneServiceData: [],
      removeOneServiceVisible: false,
    })

    let router = useRoute()

    const getDetail = (params) => {
      DeploymentDetail(params).then(res => {
        if (res.errCode === 0){
          data.DetailData = res.data
          data.deploymentEventData = res.data.events
          data.historyData = res.data.historyVersion
          data.deploymentPodData = res.data.podList.pods
          data.serviceData = res.data.svcList.services
        }else {
          message.error(res.errMsg)
        }
      })
    }
    const rolloutDeployment = (params) => {
      let cs = GetStorage()
      DeploymentRollBack(cs.clusterId, {"namespace": params.namespace, "deploymentName": params.name, "reVersion": params.version}).then(res => {
        if (res.errCode === 0){
          message.success(res.msg)
          getDetail(router.query)
        }else {
          message.error(res.errMsg)
        }
      })
    }
    const nodeDetail = (name) => {
      let cs = GetStorage()
      let routeData = routers.resolve({ name: 'NodeDetail', query: {name: name, clusterId: cs.clusterId} });
      window.open(routeData.href, '_blank');
    };
    const removeOnePod = (text) => {
      data.removeOnePodData = text
      data.removeOnePodVisible = true
    }
    const removeOnPodOnSubmit = () => {
      let cs = GetStorage()
      let delParams = {
        "name": data.removeOnePodData.objectMeta.name,
        "namespace": data.removeOnePodData.objectMeta.namespace,
      }
      DeletePod(cs.clusterId, delParams).then(res => {
        if (res.errCode === 0) {
          message.success("删除成功")
          data.removeOnePodVisible = false
          getDetail(router.query)
        } else {
          message.error(res.errMsg)
        }
      })
    }
    const detailPod = (text) => {
      let cs = GetStorage()
      routers.push({
        name: 'PodDetail', query: {
          clusterId: cs.clusterId,
          namespace: text.objectMeta.namespace,
          name: text.objectMeta.name
        }
      });
    }
    const serviceDetail = (text) => {
      let cs = GetStorage()
      routers.push({
        name: 'ServiceDetail', query: {
          clusterId: cs.clusterId,
          namespace: text.objectMeta.namespace,
          name: text.objectMeta.name
        }
      });
    }
    const removeOneService = (text) => {
      data.removeOneServiceData = text
      data.removeOneServiceVisible = true
    }
    const removeOnServiceOnSubmit = () => {
      let cs = GetStorage()
      let delParams = {
        "name": data.removeOneServiceData.objectMeta.name,
        "namespace": data.removeOneServiceData.objectMeta.namespace,
      }
      DeleteService(cs.clusterId, delParams).then(res => {
        if (res.errCode === 0) {
          message.success("删除成功")
          data.removeOneServiceVisible = false
          getDetail(router.query);

        } else {
          message.error(res.errMsg)
        }
      })
    }
    const viewPodLog = (text) => {
      let cs = GetStorage()
      routers.push({
        name: 'ContainerLog', query: {
          clusterId: cs.clusterId,
          namespace: text.objectMeta.namespace,
          name: text.objectMeta.name,
          type: text.typeMeta.kind
        }
      });
    }
    onMounted(() => {
      getDetail(router.query);
    });

    return {
      data,
      getDetail,
      GetStorage,
      deploymentStatusConditionsColumns,
      historyColumns,
      eventsColumns,
      rolloutDeployment,
      deploymentPodColumns,
      nodeDetail,
      removeOnePod,
      removeOnPodOnSubmit,
      detailPod,
      serviceColumns,
      serviceDetail,
      removeOneService,
      removeOnServiceOnSubmit,
      viewPodLog,
    }

  }
}
</script>

<style scoped>
.table-viewer-header .table-viewer-topbar-title {
  font-size: 14px;
  color: #333333;
  display: inline-block;
  margin-left: 16px;
}

.table-default-viewer {
  width: 100%;
  background-color: #FFF;
}

.table-default-viewer td {
  padding: 11px 20px;
  border: 1px solid #eeeeee;
}

.console-sub-title.custom-sub-title {
  border: 0;
  background: none;
  /*border-top: 1px solid #ccc;*/
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* 先画个圆圈 */
.circular {
  width: 30px;
  height: 30px;
  background-color: #F90;
  border-radius: 50px;
}

/* 再画个感叹号 */
.exclamation-point {
  height: 15px;
  line-height: 30px;
  display: block;
  color: #FFF;
  text-align: center;
  font-size: 20px
}
</style>